<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/png" href="../../assets/img/favicon.ico">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>科普中国后台管理</title>

		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
		<meta name="viewport" content="width=device-width" />

		<!-- Canonical SEO -->
		<link rel="canonical" href="https://www.creative-tim.com/product/light-bootstrap-dashboard-pro" />

		<!--  Social tags      -->
		<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap dashboard, bootstrap, css3 dashboard, bootstrap admin, light bootstrap dashboard, frontend, responsive bootstrap dashboard">

		<meta name="description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">

		<!-- Schema.org markup for Google+ -->
		<meta itemprop="name" content="Light Bootstrap Dashboard PRO by Creative Tim">
		<meta itemprop="description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">

		<meta itemprop="image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg">
		<!-- Twitter Card data -->

		<meta name="twitter:card" content="product">
		<meta name="twitter:site" content="@creativetim">
		<meta name="twitter:title" content="Light Bootstrap Dashboard PRO by Creative Tim">

		<meta name="twitter:description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful.">
		<meta name="twitter:creator" content="@creativetim">
		<meta name="twitter:image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg">
		<meta name="twitter:data1" content="Light Bootstrap Dashboard PRO by Creative Tim">
		<meta name="twitter:label1" content="Product Type">
		<meta name="twitter:data2" content="$29">
		<meta name="twitter:label2" content="Price">

		<!-- Open Graph data -->
		<meta property="og:title" content="Light Bootstrap Dashboard PRO by Creative Tim" />
		<meta property="og:type" content="article" />
		<meta property="og:url" content="http://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/dashboard.html" />
		<meta property="og:image" content="http://s3.amazonaws.com/creativetim_bucket/products/34/original/opt_lbd_pro_thumbnail.jpg" />
		<meta property="og:description" content="Forget about boring dashboards, get an admin template designed to be simple and beautiful." />
		<meta property="og:site_name" content="Creative Tim" />

		<!-- Bootstrap core CSS     -->
		<link href="css/bootstrap.min.css" rel="stylesheet" />

		<!--  Light Bootstrap Dashboard core CSS    -->
		<link href="css/light-bootstrap-dashboard.css" rel="stylesheet" />

		<!--  CSS for Demo Purpose, don't include it in your project     -->
		<link href="css/demo.css" rel="stylesheet" />

		<!--     Fonts and icons     -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href='css/685fd913f1e14aebad0cc9d3713ee469.css' rel='stylesheet' type='text/css'>
		<link href="css/pe-icon-7-stroke.css" rel="stylesheet" />
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="layui/layui.js" charset="utf-8"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>

		<div class="wrapper">
			<div class="sidebar" data-color="orange" data-image="../../assets/img/full-screen-image-3.jpg">
				<!--

            Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
            Tip 2: you can also add an image using data-image tag

        -->

				<div class="logo">
					<a href="http://www.creative-tim.com" class="logo-text">
						科普中国
					</a>
				</div>
				<div class="logo logo-mini">
					<a href="http://www.creative-tim.com" class="logo-text">
						KC
					</a>
				</div>

				<div class="sidebar-wrapper">

					<div class="user">
						<div class="photo">
							<img src="picture/default-avatar.png" />
						</div>
						<div class="info">
							<a data-toggle="collapse" href="#collapseExample" class="collapsed">
								管理员昵称
								<b class="caret"></b>
							</a>
							<div class="collapse" id="collapseExample">
								<ul class="nav">
									<li>
										<a href="#">管理信息</a>
									</li>
									<li>
										<a href="#">修改</a>
									</li>
									<li>
										<a href="#">添加</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<ul class="nav">
						<!--<li>
                    <a href="../dashboard.html">
                        <i class="pe-7s-graph"></i>
                        <p>Dashboard</p>
                    </a>
                </li>-->
						<li class="active">
							<a data-toggle="collapse" href="#componentsExamples" aria-expanded="true">
								<i class="pe-7s-plugin"></i>
								<p>视频管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse in" id="componentsExamples">
								<ul class="nav">
									<li class="active">
										<a href="allvideo.jsp">查询所有视频</a>
									</li>
									<li>
										<a href="addvideo.jsp">上传视频</a>
									</li>
									<!-- <li>
										<a href="icons.html">删除视频</a>
									</li>
									<li>
										<a href="notifications.html">修改视频内容</a>
									</li> -->
								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#formsExamples">
								<i class="pe-7s-note2"></i>
								<p>评论管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="formsExamples">
								<ul class="nav">

									<li>
										<a href="commentall.jsp">查找评论</a>
									</li>
								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#tablesExamples">
								<i class="pe-7s-news-paper"></i>
								<p>收藏管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="tablesExamples">
								<ul class="nav">
									<li>
										<a href="admin_save.jsp">查询收藏情况</a>
									</li>
								</ul>
							</div>
						</li>

						<li>
							<a data-toggle="collapse" href="#mapsExamples">
								<i class="pe-7s-map-marker"></i>
								<p>用户管理
									<b class="caret"></b>
								</p>
							</a>
							<div class="collapse" id="mapsExamples">
								<ul class="nav">
									<li>
										<a href="userall.jsp">查询用户信息</a>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div class="main-panel">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<div class="navbar-minimize">
							<button id="minimizeSidebar" class="btn btn-warning btn-fill btn-round btn-icon">
						<i class="fa fa-ellipsis-v visible-on-sidebar-regular"></i>
						<i class="fa fa-navicon visible-on-sidebar-mini"></i>
					</button>
						</div>
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
							<a class="navbar-brand" href="#">查询视频管理</a>
						</div>
						<div class="collapse navbar-collapse">

							<!--<form class="navbar-form navbar-left navbar-search-form" role="search">
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-search"></i></span>
									<input type="text" value="" class="form-control" placeholder="搜索...">
								</div>
							</form>-->

							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="../charts.html">
										<i class="fa fa-line-chart"></i>
										<p>收益</p>
									</a>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-gavel"></i>
										<p class="hidden-md hidden-lg">
											Actions
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">Create New Post</a>
										</li>
										<li>
											<a href="#">Manage Something</a>
										</li>
										<li>
											<a href="#">Do Nothing</a>
										</li>
										<li>
											<a href="#">Submit to live</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="#">Another Action</a>
										</li>
									</ul>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-bell-o"></i>
										<span class="notification">5</span>
										<p class="hidden-md hidden-lg">
											Notifications
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="#">Notification 1</a>
										</li>
										<li>
											<a href="#">Notification 2</a>
										</li>
										<li>
											<a href="#">Notification 3</a>
										</li>
										<li>
											<a href="#">Notification 4</a>
										</li>
										<li>
											<a href="#">Another notification</a>
										</li>
									</ul>
								</li>

								<li class="dropdown dropdown-with-icons">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<i class="fa fa-list"></i>
										<p class="hidden-md hidden-lg">
											More
											<b class="caret"></b>
										</p>
									</a>
									<ul class="dropdown-menu dropdown-with-icons">
										<li>
											<a href="#" class="text-danger">
												<i class="pe-7s-close-circle"></i> 退出登录
											</a>
										</li>
									</ul>
								</li>

							</ul>
						</div>
					</div>
				</nav>

				<div class="content">
					<div class="container-fluid">
						<div class="demoTable">
							搜索ID：
							<div class="layui-inline">
								<input class="layui-input" name="id" id="demoReload" autocomplete="off">
							</div>
							<button class="layui-btn" data-type="reload">搜索</button>
						</div>

						<table class="layui-hide" id="test" lay-filter="test"></table>

					

						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
							<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>

						<script src="layui/layui.js" charset="utf-8"></script>
						<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

						<script>
							layui.use(['table', 'form'], function() {
								var table = layui.table;

								table.render({//
									elem: '#test',
									url: 'allv',
									toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
										,
									defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
										title: '提示',
										layEvent: 'LAYTABLE_TIPS',
										icon: 'layui-icon-tips'
									}],
									title: '用户数据表',
									cols: [
										[{
											
											type: 'checkbox',
										}, {
											field: 'videoId',
											title: 'ID',
											width: 110,
											sort: true
										}, {
											field: 'videoName',
											title: '视频名称',
											width: 120,
											edit: 'text'
										}, {
											field: 'videoContent',
											title: '视频简介',
											width: 250,
											edit: 'text',
											templet: function(res) {
												return '<em>' + res.videoContent + '</em>'
											}
										}, {
											field: 'videoType',
											title: '视频类型',
											width: 120,
										}, {
											field: 'videoTime',
											title: '上传时间',
											width: 230,
										}, {
											field: 'comCount',
											title: '评论量',
											width: 120,
											sort: true
										}, {
											field: 'saveCount',
											title: '收藏量',
											width: 120,
											sort: true
										}, {
											field: 'videoNumber',
											title: '视频集数',
											width: 120,
											sort: true
										}, {
											field: 'videoVip',
											title: '视频状态',
											width: 120,
											sort: true,
										},  {
											title: '操作',
											toolbar: '#barDemo',
											width: 250
										}]
									],
									page: true,
									id: 'testReload'
								});

								//模糊查询开始
								var $ = layui.$,
									active = {
										reload: function() {
											var demoReload = $('#demoReload');

											//执行重载
											table.reload('testReload', {
												page: {
													curr: 1
													//重新从第 1 页开始
												},
												where: {
													"keywords": demoReload.val()
												}
											}, 'data');
										}
									};

								$('.demoTable .layui-btn').on('click', function() {
									var type = $(this).data('type');
									active[type] ? active[type].call(this) : '';
								});

								//头工具栏事件
								table.on('toolbar(test)', function(obj) {
									var checkStatus = table.checkStatus(obj.config.id);
									switch(obj.event) {
										case 'getCheckData':
											var data = checkStatus.data;
											layer.alert(JSON.stringify(data));
											break;
										case 'getCheckLength':
											var data = checkStatus.data;
											layer.msg('选中了：' + data.length + ' 个');
											break;
										case 'isAll':
											layer.msg(checkStatus.isAll ? '全选' : '未全选');
											break;

											//自定义头工具栏右侧图标 - 提示
										case 'LAYTABLE_TIPS':
											layer.alert('这是工具栏右侧自定义的一个图标按钮');
											break;
									};
								});
								
					
								

								//监听行工具事件
								table.on('tool(test)', function(obj) {
									var data = obj.data;
									//console.log(obj)
									if(obj.event === 'del') {
										layer.confirm('真的删除行么', function(index) {

											$.ajax({
												url:"deletevideo/"+data.videoId,
												type:"delete",
												contentType:"application/json",
												 data:JSON.stringify(data.field),
												success:function(data){
													
												layer.msg(data == "true" ? "操作失败！" : "操作成功！", {
													icon: 1
												});
												obj.del();
												layer.close(index);
											}
											})
										});
									} else if(obj.event === 'edit') {
										/* 	layer.prompt({
												formType : 2,
												value : data.email
											}, function(value, index) {
												obj.update({
													email : value
												});
												layer.close(index);
											}); */
										$("#videoId").val(data.videoId)
										$("#videoName").val(data.videoName)
										$("#videoContent").val(data.videoContent)
										$("#videoType").val(data.videoType)
										$("#videoCover").val("${sessionScope.destFile}")

										if(data.videoVip == 0) {
											$("input[name='videoVip'][ value='0']").prop("checked", true)
										} else {
											$("input[name='videoVip'][ value='1']").prop("checked", true)
										}

										$("#sign").val(data.sign)
										layer.open({
											type: 1,
											title: '编辑',
											content: $("#div"),
											area: ['750px', '550px']
										})
										layui.form.render()
										
										//监听提交
										  layui.form.on('submit(demo1)',function(data){
										
//								 		    layer.alert(JSON.stringify(data.field), {
//								 		      title: '最终的提交信息'
//								 		    })
//								 		    return false;
											//layer.alert(JSON.stringify(data.field));
//								 			用ajax提交

											$.ajax({
												url:"updatevideo",
												type:"put",
												contentType:"application/json",
												 data:JSON.stringify(data.field), 							
												success:function(msg1){
													layer.msg(msg1 == "true" ? "操作失败!" : "操作成功!", {
														icon: 1
													},function(){
														parent.layer.closeAll();
														location.reload();
														console.log(3);
														
													});
												},
												error:function(){
													console.log("error")
												}
											})
											
											return false;
										  });
										
										
									}
								});

							});
						</script>

						<!-- 弹出层文本框表单 -->
						<div id="div" style="display:none;">
							<form class="layui-form" action="" enctype="multipart/form-data" lay-filter="example">

								<div class="layui-form-item">
									<label class="layui-form-label">ID</label>
									<div class="layui-input-block">
										<input type="text" id="videoId" name="videoId" lay-verify="title" autocomplete="off" class="layui-input" readonly="readonly">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">视频名称</label>
									<div class="layui-input-block">
										<input type="text" id="videoName" name="videoName" lay-verify="title" autocomplete="off" placeholder="请输入视频名称" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">视频简介</label>
									<div class="layui-input-block">
										<input type="text" id="videoContent" name="videoContent" placeholder="请输入视频简介" class="layui-input">
									</div>
								</div>
								
								<div class="layui-form-item">
									<label class="layui-form-label">视频类型</label>
									<div class="layui-input-block">
										<input type="text" id="videoType" name="videoType" placeholder="请输入视频类型" class="layui-input">
									</div>
								</div>
								
								<div class="layui-upload">
								  <button type="button" class="layui-btn" name="mfile" id="test1">上传图片</button>
								  <div class="layui-upload-list">
								    <img class="layui-upload-img" id="demo1">
								    <p id="demoText"></p>
								  </div>
								</div>  
								
								<div class="layui-form-item">
									<label class="layui-form-label">视频封面</label>
									<div class="layui-input-block">
										<input type="text" id="videoCover" name="videoCover" placeholder="视频封面路径" class="layui-input">
									</div>
								</div>
								
								<div class="layui-form-item" pane="">
									<label class="layui-form-label">视频状态</label>
									<div class="layui-input-block">
										<input type="radio" id="videoVip" name="videoVip" value="0" title="普通视频" checked="">
										<input type="radio" id="videoVip" name="videoVip" value="1" title="会员视频"> 
									</div>
								</div>
								
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
									</div>
								</div>
							</form>

						</div>

					</div>

				</div>

			</div>
		</div>

	</body>
	<!--   Core JS Files and PerfectScrollbar library inside jquery.ui   -->
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>

	<script src="js/light-bootstrap-dashboard.js"></script>


	<script>
	
// 	function isYes(isYes){
//         if(isYes == 0 || isYes ==true){
//             return "会员视频";
//         }else{
//         	console.log(isYes);
//             return "普通视频";
//         }
// }


	
	
	
	layui.use('form', function () {
		var form = layui.form;
		form.render(); //刷新select选择框渲染
		//各种基于事件的操作，下面会有进一步介绍
		});
		//JavaScript代码区域
		
		layui.use('form', function(){
        var form = layui.form;
        form.render();
    });
	
		(function(i, s, o, g, r, a, m) {
			i['GoogleAnalyticsObject'] = r;
			i[r] = i[r] || function() {
				(i[r].q = i[r].q || []).push(arguments)
			}, i[r].l = 1 * new Date();
			a = s.createElement(o),
				m = s.getElementsByTagName(o)[0];
			a.async = 1;
			a.src = g;
			m.parentNode.insertBefore(a, m)
		})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

		ga('create', 'UA-46172202-1', 'auto');
		ga('send', 'pageview');
	</script>
	
	<script>
	layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: 'imgupload'
    ,accept: 'file'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
//         location.reload();
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      if(res.code ==0)
    	  {
    	  return layer.msg('上传成功');
    	  }
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });})
  </script>




</html>